<script setup name="template">
import { ArrowDown } from '@element-plus/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';


const router = useRouter();
const route = useRoute();
const store = useStore();

store.dispatch('home/updateCinemaList');
store.dispatch('home/updateMovieList');
const cinemaList = computed(() => store.state.home.cinemaList);
const movieList = computed(() => store.state.home.movieList);

function gotoUser() {
  router.push('/user');
}
function gotoMovie() {
  router.push('/movie');
}
function gotoCinema() {
  router.push('/cinema');
}
function gotoMovieHall() {
  router.push('/moviehall');
}
function gotoPlan() {
  router.push('/plan');
}
function gotoComment() {
  router.push('/comment');
}
function gotoOrder() {
  router.push('/order');
}
</script>

<template>
  <div class="wrapper">
    <div class="header-wrapper">
      <div class="header">
        <div class="logo">
          <div class="img"></div>
          <h3>淘气电影网</h3>
        </div>
        <div class="user">
          <div class="user-img">
            <img src="" alt="">
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              admin
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="content">
        <ul>
          <li @click="gotoUser"><span>用户管理</span></li>
          <li @click="gotoMovie"><span>电影管理</span></li>
          <li @click="gotoCinema"><span>影院管理</span></li>
          <li @click="gotoMovieHall"><span>影厅管理</span></li>
          <li @click="gotoPlan"><span>电影排片</span></li>
          <li @click="gotoComment"><span>电影评价</span></li>
          <li @click="gotoOrder"><span>订单管理</span></li>

        </ul>
        <div class="movie-info">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scope>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: $line;

  .header-wrapper {
    width: 100%;
    height: 60px;
    background-color: $white;
    margin-bottom: 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .header {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .logo {
        display: flex;
        align-items: center;

        .img {
          width: 40px;
          height: 40px;
          // background-color: $line;
        }
        h3 {
          margin-left: 10px;
          font-size: 20px;
        }
      }
      .user {
        display: flex;
        align-items: center;

        .user-img {
          width: 40px;
          height: 40px;
          // background-color: $line;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .el-dropdown .el-dropdown-link {
          cursor: pointer;
          display: flex;
          align-items: center;

          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
  .content-wrapper {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
      width: 1200px;
      height: 100%;
      display: flex;

      & > ul {
        width: 200px;
        height: 100%;
        background-color: $white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        list-style-type: none;
        border: 1px solid #e9eaeb;
        border-right: none;
        margin: 0;

        li {
          width: 100%;
          height: 50px;
          font-size: 14px;
          display: flex;
          justify-content: left;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background-color: #ecf5ff;
          }

          span {
            margin-left: 30px;
          }
        }
      }
      .movie-info {
        width: calc(100% - 200px);
        height: 650px;
        background-color: $white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
        border: 1px solid #e9eaeb;
      }
    }
  }
}
</style>
